<template>
    <div class="ctLayout">
        <div class="countPie">
            <div style="width:400px">
                <pie-echarts :option="optionPie" :e_height="200">
                    <template #title><span>营销量</span></template>
                </pie-echarts>
            </div>
            <div style="width:500px">
                <pie-echarts :option="option" :e_height="200">
                    <template #title><span>营销量</span></template>
                </pie-echarts>
            </div>
            <div>
                <pie-echarts :option="optionBar" :e_height="400">
                    <template #title><span>收入</span></template>
                    <template #kinds>
                        <div class="dataKinds">
                            <kinds-btn :list="kinds"></kinds-btn>
                        </div>
                    </template>
                </pie-echarts>
            </div>


        </div>
    </div> 
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { pieEcharts, kindsBtn } from '@/components'

const kinds = ref(['一年', '一月', '一周'])
const optionBar = ref({
    xAxis: {
        data: ['如家酒店', '四季酒店', '快捷酒店', 'IU酒店', '天悦酒店']
    },
    yAxis: {},
    series: [
        {
            type: 'bar',
            data: [ 80, 24, 18, 25, 27, 28, 25 ],
            itemStyle: {
                color:'#1289A7',
                barBorderRadius: 5,
                borderWidth: 1,
                borderType: 'solid',
                borderColor: '#73c0de',
                shadowColor: '#1289A7',
                shadowBlur: 3
            }
        }
    ],
    
})

const optionPie = ref({
    series:[
        {
            type:'pie',
            radius:'95%',
            data:[
                {
                    value:108,
                    name:'1酒店'
                },
                {
                    value:138,
                    name:'2酒店'
                },
                {
                    value:208,
                    name:'3酒店'
                }
            ]
        }
    ]
})
const option = {
    legend: {
        orient: 'vertical',
        x: 'right',
        data: ['如家酒店', '四季酒店', '快捷酒店', 'IU酒店', '天悦酒店']
    },
    series: [
        {
        type: 'pie',
        radius: ['100%', '65%'], //1. 饼相较于盒子的大小 2. 内圆的大小
        avoidLabelOverlap: false,
        label: {
            show: false,      //是否饼中对应的名称 false时 只展示移入的元素
            position: 'center'    //显示的位置 showtrue时center会重叠 效果不好
        },
        emphasis: {
            label: {
            show: true,
            fontSize: '25',
            fontWeight: 'bold'
            }
        },
        data: [
            { value: 335, name: '如家酒店' },
            { value: 310, name: '四季酒店' },
            { value: 234, name: '快捷酒店' },
            { value: 135, name: 'IU酒店' },
            { value: 1548, name: '天悦酒店' }
        ]
        }
    ]
};
onMounted(() => {
    
})


</script>

<style lang="scss" scoped>
.ctLayout{
    width: 100%;
    @include flexColumnCenter;
    gap: 2px 0;
    @include allBack;
}

.countPie{
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 20px;
    & div{
        width: 100%;
    }
}
.dataKinds{
    width: 210px !important;
    height: 35px;
    border: 1px solid var(--el-border-color);
    border-radius: 30px;
    font-size: 13px;
    box-sizing: border-box;
    background: #f1f2f3;
    @include flexRowCenter;
    & span{
        padding: 0 20px;
        height: 100%;
        border-radius: 30px;
        @include flexRowCenter;
    }
}
</style>